<template>
  <div id="home">
    <!-- NavBar.vue -->
    <nav-bar>
      <!-- 插槽模板 -->
      <template v-slot:default>图书兄弟</template>  
    </nav-bar>
    <tab-control v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
    <div class="wrapper">
        <div class="content">
          <div ref="banref">
            <!-- 轮播图 -->
            <home-swiper :banners="banners"></home-swiper>
            <!-- 推荐 -->
            <recommend-view :recommends="recommends"></recommend-view>
          </div>
          
          <!-- @tabClick="tabClick"自定义事件 -->
          <tab-control @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
          <!-- 是商品列表 -->
          <goods-list :goods="showGoods"></goods-list>
        </div>
    </div>
    <!-- 返回顶部 -->
    <back-top @bTop="bTop" v-show="isShowBackTop" >
    </back-top>
  </div>
</template>

<script>
// 轮播图
import NavBar from 'components/common/navbar/NavBar'
// 导航栏
import RecommendView from './ChildComps/RecommendView'
// 
import TabControl from 'components/content/tabControl/TabControl'
// 商品列表
import GoodsList from 'components/content/goods/GoodsList'
import {ref,onMounted,reactive,computed,watchEffect,nextTick} from 'vue';
import {getHomeAllData,getHomeGoods} from 'network/home';
// 滚动插件
import BScroll from 'better-scroll'
// 返回顶部
import BackTop from 'components/common/backtop/BackTop'
// 
import HomeSwiper from './ChildComps/HomeSwiper'
// 挂载--生命周期
export default {
  name: 'Home',
  components: {
    HomeSwiper,
    NavBar,
    RecommendView,
    TabControl,
    GoodsList,
    BackTop
  },
  setup(){
    //   临时变量
      let temid = ref(0);
      let banref = ref(null);
      const recommends = ref([]);
      let isTabFixed =ref(false);
      // 返回顶部
      let isShowBackTop = ref(false);
      //商品列表数据模型
      const goods = reactive({
          sales:{page:1,list:[]},
          new:{page:1,list:[]},
          recommend:{page:1,list:[]}
      })

        let currentType = ref('sales');

        const showGoods = computed(()=>{
            return goods[currentType.value].list;
        })
        let bscroll = reactive({});
        let banners = ref([]);
      onMounted(()=>{
        // 获取首页推荐的数据
          getHomeAllData().then(res=>{
              recommends.value = res.goods.data;
              banners.value = res.slides;
              // console.log(res.slides);
          })

          //   获取数据
          getHomeGoods('sales').then(res=>{
              goods.sales.list = res.goods.data;
          })
          getHomeGoods('recommend').then(res=>{
               goods.recommend.list = res.goods.data;
          })
          getHomeGoods('new').then(res=>{
               goods.new.list = res.goods.data;
          })

          // 创建BetterScroll对象--滚动
          bscroll = new BScroll(document.querySelector('.wrapper'),{
            probeType: 3, //0,1,2,3,3是只要在运动就触发scroll事件
            click: true,   //是否允许点击
            pullUpLoad: true, //下拉加载更多，默认为假
          });
          //使用触发滚动事件
          bscroll.on('scroll',(position)=>{
            // console.log(banref.value.offsetHeight);
            // console.log(-position.y);
            isShowBackTop.value = isTabFixed.value = (-position.y)>(banref.value.offsetHeight);

          })

          //上拉加载数据，触发事件-pullingUp
          bscroll.on("pullingUp",()=>{
            // console.log('上拉加载更多-');
            const page = goods[currentType.value].page + 1;
            getHomeGoods(currentType.value,page).then(res=>{
              goods[currentType.value].list.push(...res.goods.data);
              goods[currentType.value].page +=1;
            })
            //完成上拉，等数据请求完成，要将新数据展示出来
            bscroll.finishPullUp();
            
            //重新计算高度
            bscroll.refresh();
            // console.log("contentheight:"+document.querySelector('.content').clientHeight);
            // console.log("当前类型："+currentType.value+",当前页："+page);
          })
          // 数据变新
          nextTick(()=>{
            //重新计算高度
            bscroll && bscroll.refresh();
          })
          
      })
      //触发从TabControl事件
      const tabClick = (index)=>{
          let types = ['sales','new','recommend'];
          currentType.value = types[index];
      }
      // 监听 任何一个变量有变化
      watchEffect(()=>{
        // 数据变新
        nextTick(()=>{
          //重新计算高度
          bscroll && bscroll.refresh();
        })
      })  

      // 返回顶部
      const bTop = ()=>{
        bscroll.scrollTo(0,0,300);
      }

      return{
          recommends,
          tabClick,
          temid,
          goods,
          showGoods,
          isTabFixed,
          banref,
          isShowBackTop,
          bTop,
          banners
      }
  }
}
// import NavBar from 'components/common/navbar/NavBar'
// // 挂载--生命周期
// // import {ref,onMounted} from 'vue';
// // import {getHomeAllData,getBanner} from 'network/home';
// export default {
//   name: 'Home',
//   // setup(){
//   //   const banner = ref([]);
//   //   onMounted(()=>{
//   //     getHomeAllData().then(res=>{
//   //       console.log(res);
//   //       banner.value = res.slides;
//   //     }).catch(err=>{

//   //     })
//   //   })
//   //   return{
//   //     banner
//   //   }
//   // },
//   components: {
//     NavBar
//   }
// }
</script>
<style scoped>
  .banners img{
    width: 100%;
    height: 200px;
  }
  #home{
    height: 100vh;
    position: relative;
  }
  .wrapper{
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0px;
    right: 0px;
    overflow: hidden;
  }
</style>
